/**
 *@描述：知识详情页面
 *@作者：殷健
 *@创建时间：2022/7/7
 *@最后修改时间：2022/7/7
 */

import { Row, Col, Typography, Space, Button } from 'antd';
import CommonIconFont from '@/components/CommonIconFont';
import { AttachmentList } from '@/pages/Dashboard/Knowledge/components/Content/attachment';
import { RelevanceCardList } from '@/pages/Dashboard/Knowledge/components/Content/relevance';
import { QuoteList } from '@/pages/Dashboard/Knowledge/components/Content/quote';
import classNames from 'classnames';
import {isEmpty, isNil} from 'lodash';
import styles from './content.less';
import {GetKnowledgeDetailsRequest} from "@/pages/Dashboard/Knowledge/service";
import {useEffect, useState} from "react";
import {Link, useParams} from "umi";

import {getAuthorStr} from '@/utils/func';
import CustomCodeEditor from "@/pages/Dashboard/Knowledge/components/CustomCodeEditor";
import CustomDiagramViewer from "@/pages/Dashboard/Knowledge/components/CustomDiagramViewer";
import {useModel} from "@@/plugin-model/useModel";
import {history} from "@@/core/history";

type Attachment = {
    type: 'word' | 'pdf' | 'ppt' | 'mp4' | string;
    title: string;
    icon?: string;
};
type SectionObj = {
    id: string;
    title: string;
    content?: string;
    attachments?: Attachment[];
    type?:string;
};
const { Title } = Typography;
const KnowledgeContent = () => {

    //todo: 获取地址栏参数
    //获取地址栏参数
    const {
        id,
    }: {
        id:string;//路由上的知识ID
    } = useParams();
    const { query = {},pathname} = history.location;
    const { redirect } = query as { redirect: string };
    const [ data,setData ] = useState<AircasKB.Knowledge.GetKnowledgeDetailsResponse>();
    const [ loading,setLoading ] = useState(false);
    const { initialState } = useModel('@@initialState');
    const isLogin: boolean = !isNil(initialState?.currentUser);
    //组件初始化函数
    //todo: useEffect
    useEffect(()=>{
        if(id){
            GetKnowledgeDetails(id);
        }
    },[id,query])


    //根据知识ID获取知识详情
    //todo: GetKnowledgeDetails
    const GetKnowledgeDetails = async (id:string) => {
        setLoading(true);
        try {
            const res:AircasKB.ResponseType<AircasKB.Knowledge.GetKnowledgeDetailsResponse> = await GetKnowledgeDetailsRequest({
                knowledgeId:id
            })
            if(res.code == 200){
                document.title = res.data.title as string;
                setData(res.data);
            }
            setLoading(false);
        }
        catch (e) {
            setLoading(false);
        }
    }



    // @ts-ignore
    return (
        <div className={styles.wrapper}>
            <section id="title" className={styles.title}>
                <Title level={2}>{data && data.title || '-'}</Title>
            </section>
            <section className={styles.basic}>
                <Row id="basic">
                    <Col span={16} className={styles.view}>
                        <Space>
                            <p>浏览量 : {data && data.uv || '-'}</p>
                            <p>下载量 : {data && data.downloads || '-'}</p>
                            <p>总被引 : {data && data.totalCited || '-'}</p>
                        </Space>
                        <p>作者：{data && data.propertyOwnerList && data.propertyOwnerList?.length>0 && getAuthorStr({value:data.propertyOwnerList})}</p>
                    </Col>
                    <Col span={8} className={styles.tool}>
                        <Space size={'middle'}>
                            <Button type="link" size="small">
                                <CommonIconFont
                                    type="aircaskb-Pdf"
                                    style={{ fontSize: 24 }}
                                ></CommonIconFont>
                                <p>PDF</p>
                            </Button>
                            <Button type="link" size="small">
                                <CommonIconFont
                                    type="aircaskb-fenxiang2"
                                    style={{ fontSize: 24 }}
                                ></CommonIconFont>
                                <p>导出</p>
                            </Button>
                            <Button type="link" size="small">
                                <CommonIconFont
                                    type="aircaskb-fenxiang1"
                                    style={{ fontSize: 24 }}
                                ></CommonIconFont>
                                <p>分享</p>
                            </Button>
                            <Button type="link" size="small">
                                <CommonIconFont
                                    type="aircaskb-shoucang"
                                    style={{ fontSize: 24 }}
                                ></CommonIconFont>
                                <p>收藏</p>
                            </Button>
                        </Space>
                    </Col>
                </Row>
                <div id="intellectualProperty" className={styles.zy}>
                    <p className={styles.subTitle}>摘要</p>
                    <div dangerouslySetInnerHTML={{__html:data && data.baseInfo || ''}}>
                    </div>
                    {/*<Paragraph>{data && data.baseInfo}</Paragraph>*/}
                </div>
            </section>
            <section id="section">

                {
                    data && data.chapterList && data.chapterList?.length>0 && data.chapterList?.map((item)=>{
                        return (
                            <Section key={item.id}
                                id={`section-${item.id}`}
                                title={item.title || ''}
                                content={item.content}
                                type = {item.type}
                                // attachments={attachments}
                            />
                        )
                    })
                }
            </section>
            {/* 关联知识 */}
            {data && data.associativeList && data.associativeList.length > 0 &&
                <section id="relevance" className={styles.section}>
                    <p className={classNames(styles.subTitle, styles.center)}>关联知识</p>
                    <RelevanceCardList knowledgeId={id} data={data && data.associativeList}/>
                </section>
            }
            {/* 附件下载 */}
            {
                data && data.attachmentList && data.attachmentList?.length>0 &&
                <section id="attachment" className={classNames(styles.section)}>
                    <p className={classNames(styles.subTitle, styles.center)}>附件下载</p>
                    <AttachmentList mode="view" datalist={data.attachmentList}/>
                </section>
            }

            {/* 参考引用 */}
            {
                data && data.referenceList && data.referenceList.length>0 &&
                <section id="quote" className={styles.section}>
                    <p className={classNames(styles.subTitle, styles.center)}>参考引用</p>
                    <QuoteList mode="view" knowledgeId={id}  loading={loading} data={data.referenceList} />
                </section>
            }
            {!isLogin && data && data.isPublic != "1" &&
                <div style={{width:'100%',textAlign:'center'}}>
                    <Button type="link" size="small">
                        <Link to={`/user/login?redirect=${redirect||pathname}`}>登录后,查看更多......</Link>
                    </Button>
                </div>

            }
        </div>
    );
};

const Section = ({ id, title, content, attachments,type }: SectionObj) => {
    return (
        <section id={id} className={styles.section}>
            <p className={styles.subTitle}>{title}</p>
            {  type == "25" &&  <div dangerouslySetInnerHTML={{__html:content || ''}}></div> }
            {  type == "26" &&  <CustomCodeEditor value={content} readonly={true}></CustomCodeEditor> }
            {  type == "27" &&  <CustomDiagramViewer id={id} value={content}></CustomDiagramViewer> }
            {/*<Paragraph>{content}</Paragraph>*/}
            {!isEmpty(attachments) && (
                <Row gutter={[24, 24]} className={styles.attachmentWrapper} align="middle">
                    {(attachments ?? []).map((attachment: Attachment, index: number) => {
                        return (
                            <Col span={6} key={index} className={styles.item}>
                                <CommonIconFont
                                    className={styles.icon}
                                    type={`aircaskb-${attachment.icon}`}
                                />
                                <div className={styles.content}>
                                    <p>{attachment?.title}</p>
                                </div>
                            </Col>
                        );
                    })}
                </Row>
            )}
        </section>
    );
};

export default KnowledgeContent;
